<template>
	<view class="Notice-view clearfix" :style="{ backgroundColor: modelData.bgColor, margin: modelData.padding * 2 + 'rpx auto' }">
		<view @click="msg_show = true">
			<view class="notice-icon float_left" v-if="modelData.icon === 1"><u-icon name="volume" :color="modelData.iconColor" size="32"></u-icon></view>
			<view class="notice-icon float_left" v-if="modelData.icon === 2">
				<view class="icon-fill" :style="{ backgroundColor: modelData.iconColor }"><u-icon name="volume-fill" color="#ffffff" size="26"></u-icon></view>
			</view>
			<view class="notice-icon notice-icon-text float_left" v-else>
				<view
					class="icon-text"
					:style="{
						backgroundColor: $utils.colorRgba(modelData.iconColor, '0.15'),
						color: modelData.iconColor
					}"
				>
					公告
				</view>
			</view>
			<view class="notice-main float_left" :style="{ width: modelData.icon === 3 ? '600rpx' : '620rpx' }">
				<u-notice-bar
					mode="horizontal"
					padding="18rpx 0"
					:volume-icon="false"
					:font-size="24"
					type="none"
					:speed="50"
					:color="modelData.textColor"
					:border-radius="12"
					:list="[noticeData.content]"
				></u-notice-bar>
			</view>
		</view>
		<u-popup
			v-model="msg_show"
			border-radius="18"
			mode="center"
			height="905"
			:custom-style="{
				background: 'rgba(0,0,0,0)'
			}"
		>
			<view class="mag-view">
				<view class="mag-top primary-bg"><image class="notice-i" src="../../../static/img/notice-i.png" mode=""></image></view>
				<view class="msg-cont">
					<image class="msg-yun" src="../../../static/img/notice-bg.png" mode=""></image>
					<view class="mag-tit">{{ noticeData.title }}</view>
					<scroll-view class="mag-main" scroll-y>{{ noticeData.content }}</scroll-view>
				</view>
				<view class="confirm-btn primary-btn-pain" @click="msg_show = false">我知道了</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	name: 'Notice',
	props: {
		modelData: {
			type: Object,
			default: () => {
				return {};
			}
		},
		noticeData: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	data() {
		return {
			msg_show: false
		};
	},
	methods: {
		openPop() {
			this.$refs.noticePop.open();
		},
		closePop() {
			this.$refs.noticePop.close();
		}
	}
};
</script>
<style>
.Notice-view .u-mode-center-box {
	background: rgba(0, 0, 0, 0) !important;
}
</style>
<style scoped lang="scss">
.Notice-view {
	width: 706upx;
	padding-right: 24upx;
	margin: 10upx auto;
	background-color: #ffffff;
	border-radius: 12upx;
	.notice-icon {
		width: 60upx;
		text-align: right;
		line-height: 70upx;
		height: 70upx;
		.icon-text {
			font-size: 22upx;
			background: #ffe1e1;
			color: $uni-color-primary;
			border-radius: 18upx;
			display: inline-block;
			width: 64upx;
			height: 36upx;
			line-height: 36upx;
			text-align: center;
		}
		.icon-fill {
			background-color: $uni-color-primary;
			width: 36rpx;
			height: 36rpx;
			text-align: center;
			line-height: 36rpx;
			border-radius: 100%;
			display: inline-block;
		}
	}
	.notice-icon-text {
		width: 80upx;
	}
	.notice-main {
		width: 620upx;
	}
}
.mag-view {
	text-align: center;
	transform: translateY(100rpx);
	background-color: #ffffff;
	width: 612rpx;
	border-radius: 18rpx;
	padding-bottom: 46rpx;
	.mag-top {
		height: 242rpx;
		border-radius: 18rpx;
		background-color: $uni-color-primary;
		width: 100%;
		position: relative;
		.notice-i {
			width: 422rpx;
			height: 312rpx;
			position: absolute;
			top: -100rpx;
			left: 140rpx;
		}
	}
	.msg-cont {
		padding: 0 50rpx;
		padding-top: 56rpx;
		position: relative;
		.msg-yun {
			position: absolute;
			width: 622rpx;
			height: 215rpx;
			left: 0;
			top: -116rpx;
			z-index: 1;
		}
		.mag-main{
			height: 200rpx;
		}
		.mag-tit {
			position: relative;
			z-index: 9;
			font-size: 38upx;
			font-weight: bold;
			padding-bottom: 30rpx;
		}
	}
	.confirm-btn {
		line-height: 90rpx;
		height: 90rpx;
		font-size: 34rpx;
		width: 506rpx;
		margin: 30rpx auto 0;
		border: 1px solid $uni-color-primary;
		color: $uni-color-primary;
		border-radius: 12rpx;
	}
}
</style>
